<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/jsp/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctxStatic}/plugins/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/animate.min.css" rel="stylesheet">
    <link href="${ctxStatic}/plugins/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/plugins/h+/css/plugins/webuploader/webuploader.css">
    <link href="${ctxStatic}/plugins/h+/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .ml10 {
            margin-left: 15px;
        }

    </style>

</head>

<body class="gray-bg" >
<div class="wrapper wrapper-content" id="ccbb">
    <div class="row">
        <div class="col-sm-12">
            <div class="toolbar">
                <div id="toolbar">
                        <%--<button id="btn_doDel" class="btn btn-w-s btn-danger"><i class="fa fa-times-circle"></i>&nbsp;批量作废</button>--%>
                    <%--<button id="btn_doBack" class="btn btn-w-s btn-edit"><i class="fa fa-times-circle"></i>&nbsp;批量退回</button>--%>
                </div>
            </div>
            <span id="spancc" class="spancc"></span>
            <div class="row">
                <%--<div class="ibox float-e-margins">--%>
                    <%--<div class="ibox-title">--%>
                        <%--<h5>搜索条件</h5>--%>
                        <%--<div class="ibox-tools">--%>
                            <%--<a class="collapse-link">--%>
                                <%--<i class="fa fa-chevron-up"></i>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="ibox-content" >--%>
                        <%--<div class="row">--%>
                            <%--<div class="col-md-2"><input placeholder="卡号" id="search_cardCode" class="form-control"/></div>--%>
                            <%--<div class="col-md-2"><input placeholder="密匙" id="search_customer" class="form-control"/></div>--%>
                            <%--<div class="col-md-1"><button id="btn_search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;搜索</button></div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
            </div>
            <table id="exampleTablePagination"></table>
        </div>
    </div>
</div>

</body>
<script src="${ctxStatic}/plugins/h+/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctxStatic}/plugins/h+/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/bootstrap-table.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/locale/bootstrap-table-zh-CN.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/export/bootstrap-table-export.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/bootstrap-table-master/extensions/editable/bootstrap-table-editable.js"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="${ctxStatic}/plugins/h+/js/content.min.js?v=1.0.0"></script>
<script src="${ctxStatic}/plugins/h+/js/plugins/layer/laydate/laydate.js"></script>
<script>

</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script type="text/javascript">
    var ajaxpath='${pageContext.request.contextPath}';
    //初始化表格对象
    var $table = $('#exampleTablePagination');
    /*
     获取选中行的相关数据
     */
    $(function () {
        $table.on('click-row.bs.table', function (e, row, $element) {
            $('.success').removeClass('success');
            $($element).addClass('success');
        });
        $('#button').click(function () {
            alert('Selected name: ' + getSelectedRow().customer);
        });
    });
    function getSelectedRow() {
        var index = $table.find('tr.success').data('index');
        return $table.bootstrapTable('getData')[index];
    }





    ////////////////////////////////////////////////////////////////////////////////////////以下是通过js方式初始化BootStrapTable/////////////////////////////////////////////

    $table.bootstrapTable({
        url: ajaxpath+"/period/showDetail.ac",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",//必须的
        dataType: "json",
        pageList:[10, 20, 50, 100],//会根据当前的数据量加载合适的pageList
        height: ($(window).height()-200) ,
        //cardView:true,//是否自适应手机
        pagination: true, //分页
        // queryParamsType: "limit",
        singleSelect: false,
        cache:false,
        sortName:"name",
        search: false, //显示搜索框
        showColumns:false,
        showRefresh:false,
        showToggle:false,
        showPaginationSwitch:false,
        smartDisplay:true,
        detailView:false,
        toolbar:"#toolbar",
        queryParams: queryParams,//参数
        searchOnEnterKey:true,
        detailFormatter:function(index, row, element){
            return row.customer;
        },
        sidePagination: "server", //服务端处理分页
        columns: [
            {
                visible:false,
                field:'id'
            },
            {
                title:'选择',
                align:'center',
//                formatter:stateFormatter,
                checkbox:true
            },
            {
                title: '期数',
                field: 'thisTerm',
                sortStable:true,
                align: 'center'
            },
            {
                title: '领取券额',
                field: 'thisTotal',
                sortStable:true,
                align: 'center'
            },
            {
                title: '领取状态',
                field: 'state',
                align: 'center',
                formatter:function(value,row,index){
                    var html="";
                    if(value=="0"||value=="1"){
                        html="<font style=\"color:red\">待领取</font>";
                    }else if(value=="2"){
                        html="<font style=\"color:green\">已领取</font>";
                    }else if(value=="3"){
                        html="<font style=\"color:black\">过期领取</font>";
                    }else if(value=="4"){
                        html="<font style=\"color:black\">已取消</font>";
                    }
                    return html;
                }
            },
            {
                title: '领取期数',
                field: 'getTerm',
                align: 'center',
                formatter:function(value,row,index){
                    var html="";
                    if(row.state=="0"||row.state=="1"){
                        html="<font style=\"color:red\">待领取</font>";
                    }else if(row.state=="4"){
                        html="<font style=\"color:black\">已取消</font>";
                    }else{
                        html='<font>第'+value+'期</font>';
                    }
                    return html;
                }
            },
            {
                title: '领取时间',
                field: 'getTime',
                sortStable:true,
                align: 'center',
                formatter:function(value,row,index){
                    var html="";
                    if(row.state=="0"||row.state=="1"){
                        html="<font style=\"color:red\">待领取</font>";
                    }else if(row.state=="4"){
                        html="<font style=\"color:black\">已取消</font>";
                    }else{
                        html='<font>'+value+'</font>';
                    }
                    return html;
                }
            }
        ]
    });

    /*
     搜索按钮
     */
    $("#btn_search").click(function(){
        $table.bootstrapTable('selectPage', 1);
        $table.bootstrapTable('refresh', queryParams);
    })

    /*
     传递的参数
     */
    function queryParams(params) {
        var code=$("#search_cardCode").val();
        var cardCode=$("#search_customer").val();
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,  //页面大小
            offset: params.offset, //页码
            pageindex:params.pageNumber,
            cardCode: cardCode,
            id:'${id}',
            code:code
        };
        return temp;
    };

    function getSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
    }


//作废
    function doCancellation(id,state){
        if(state=='1'){
            alert("已领取的实体卡无法作废！");
        }else{
            doCancellationList(id);
        }
    }
    //批量作废
    $("#btn_doDel").click(function(){
        var id=getSelections();
        doCancellationList(id);
    });

    //批量退回
    $("#btn_doBack").click(function(){
        var id=getSelections();
        doBackList(id);
    });

//作废操作
function doCancellationList(id) {
    $.ajax({
        url: ajaxpath+'/offlineCard/doCancellation.ac?id='+id.toString(),// 跳转到 action
        type: 'post',
        cache: false,
        dataType: 'json',
        success: function (data) {
            if(data=='1'){
                alert("作废成功！", null);
                $table.bootstrapTable('selectPage', 1);
                $table.bootstrapTable('refresh', queryParams);
            }else{
                alert("无效的实体卡！", null);
            }
        },
        error: function () {
            alert("操作失败！");
        }
    });
}

function  doBack(id,state,isGrand) {
    if(isGrand=='0'&&state=='0'){
        doBackList(id);
    }else{
        alert("该实体卡无法退回！");
    }
}

function  doBackList(id) {
    $.ajax({
        url: ajaxpath+'/offlineCard/doBackList.ac?id='+id.toString(),// 跳转到 action
        type: 'post',
        cache: false,
        dataType: 'json',
        success: function (data) {
            if(data=='1'){
                alert("退回成功！", null);
                $table.bootstrapTable('selectPage', 1);
                $table.bootstrapTable('refresh', queryParams);
            }else{
                alert("无效的实体卡！", null);
            }
        },
        error: function () {
            alert("操作失败！");
        }
    });
}

</script>



</html>
